<template>
  <el-dialog :title="this.id ? '修改': '添加'" :visible.sync="value" :before-close="cancel">
    <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="80px">
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="dialogForm.name" placeholder="请输入任务名称" size="small"></el-input>
      </el-form-item>
      <el-form-item label="任务分组" prop="categroy">
        <el-input v-model="dialogForm.categroy" placeholder="请输入任务分组" size="small"></el-input>
      </el-form-item>
      <el-form-item label="任务包" prop="clazz">
        <el-input v-model="dialogForm.clazz" placeholder="请输入任务包的路径" size="small"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { save, update } from "@/api/task";
export default {
  name: "jobAddAndUpddate",
  components: {},
  props: {
    value: Boolean
  },
  data() {
    return {
      id: null,
      dialogForm: {
        name: "",
        categroy: "",
        clazz: ""
      },
      rules: {
        name: [
          { required: true, message: "任务名称不能为空", trigger: "blur" }
        ],
        categroy: [
          { required: true, message: "任务分组不能为空", trigger: "blur" },
          {
            required: true,
            validator: (rule, value, callback) => {
              const regx = /[\u4e00-\u9fa5]/gu;
              if (regx.test(value)) {
                callback(new Error("不能输入中文"));
              }
              callback();
            }
          }
        ],
        clazz: [{ required: true, message: "任务包不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    init(row) {
      this.dialogForm = row;
    },
    submit() {
      this.$refs["dialogForm"].validate(async isOk => {
        if (isOk) {
          if (this.dialogForm.id) {
            await update(this.dialogForm);
          } else {
            await save(this.dialogForm);
          }
          // 重新刷新数据
          this.$emit("refresh");
        }
      });
    },
    cancel() {
      this.$refs["dialogForm"].resetFields();
      this.dialogForm = {
        name: "",
        categroy: "",
        clazz: ""
      };
      this.$emit("input", false);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>